<template>
  <div class="content-container">
    <el-row :gutter="16">
      <template-list :list="data" />
    </el-row>
    <el-row justify="center">
      <el-button v-if="!isLastPage" type="primary" size="large" :loading="isLoading" @click="loadMorePage">
        加载更多
      </el-button>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
// import { useUserStore } from '@/stores/user'
import { useTemplatesStore } from '@/stores/templates'
import { useGlobalStore } from '@/stores/global'
import useLoadMore from '@/hooks/useLoadMore'

const templates = useTemplatesStore()
const global = useGlobalStore()
const data = computed(() => templates.templates)
const total = computed(() => templates.totalTemplates)
const isLoading = computed(() => global.isOpLoading('fetchTemplates'))

const searchParams = { pageIndex: 0, pageSize: 8 }
const { loadMorePage, isLastPage } = useLoadMore(templates.fetchTemplates, total, searchParams)

onMounted(() => {
  templates.$reset()
  templates.fetchTemplates(searchParams)
  // window.addEventListener('scroll', () => {
  //   // 1、获取文档的高度
  //   const totalPageHeight = document.body.scrollHeight
  //   // 2、 获取当前滚动的长度
  //   const scrollPoint = window.scrollY + window.innerHeight
  //   // 判断是否到页面的最底部
  //   if (scrollPoint >= totalPageHeight && !isLastPage.value) {
  //     console.log('到达底部')
  //     loadMorePage()
  //   }
  // })
})
</script>
<style lang="scss" scoped>
.content-container {
  background: #fff;
  padding: 0 24px 24px 30px;
  min-height: 85vh;
  max-width: 1200px;
  margin: 50px auto;
  width: 100%;
}
</style>
